<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>	
<div id="root">
<div>
 <button @click='setVal'>setVal</button>
 <button @click='setLength'>setLength</button>
 <button @click='pop'>pop</button>
 </div>
 <ul>
 <li v-for="item in items" >{{ item }}</li>
 </ul> 
 <p>{{ message }}</p> 
</div>
</div>
<script>
	/**
	 * 　由于JS的限制， Vue 不能检测以下变动的数组：
	 * 　1、利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
	 * 　2、修改数组的长度时，例如： vm.items.length = newLength
	 */
	var watchFunc = function(){
	 	 vm.message = '数据发生变化';
		 setTimeout(function(){
		 	vm.message = '';
		 },500); 
	}
	var vm = new Vue({
		el : "#root",
		data : {
			items : ['Foo','Bar','Baz','Ken','Susan'],
			message : '',
		},
		watch : {
			items : watchFunc,
		},
		methods : {
			pop(){
				this.items.pop();
			},
			setVal(){
				this.items[0] = 'match';//无法检测到手动给位赋值
			},
			setLength(){
				this.items.length = 2;//直接设置值和长度使用watch不能检测到变化
			}
		}
	})
</script>
</body>
</html>